<template>
	<view>
		<view id="page_content">
			<tui-drawer mode="right" :visible="isopen">
				<headNav @close="closeOpen" @showTips="showTips"></headNav>
			</tui-drawer>
			<view class="page trade_history_page table_page">
				<view class="page_header commom_header">
					<view class="back_btn" @click="goBack"></view>
					<view class="header_center">
						<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>
						<view class="golden-title"><text>{{$t('invest')}}{{$t('records')}}</text></view>
					</view><button class="menu_btn" @click="navs('showLeft')">
						<image src="/static/images/entryscreen/menu.svg" mode="widthFix">
					</button>
				</view>
				<view class="table_header mobile-view">
					<view class="th sortable date sorter desc">{{$t('dates')}}/ ID</view>

					<view class="th sortable investment">{{$t('invest')}}</view>
					<view class="th sortable pool">{{$t('types')}}</view>
					<view class="th hash_details">{{$t('hash')}}{{$t('details')}}</view>
				</view>
				<view class="trade_history_list">
					<view class="tui-tool" v-for="(item,index) in recordsList" :key="index">
						<view class="tui-tool-item">{{item['create_time']}}</view>
						<view class="tui-tool-item">{{item['money']}}({{item['type']}})</view>
						<view class="tui-tool-item">{{item['status']}}</view>
						<view class="tui-tool-item e-hidden">{{item['hash']}}</view>
					</view>
				</view>
			</view>



		</view>
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop"
			@showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				showPurse: false,
				isopen: false,
				showLink: false,
				hasToken: false,
				page: 1,
				recordsList: '',
				loadding: false,
				pullUpOn: true,
				open_wallet: false,
			};
		},
		onLoad() {
			if (this.tui.isLogin()) {
				this.hasToken = true;
				this.init();
			}

		},
		methods: {
			init() {
				let datas = {
					page: this.page,
				};
				let result = this.tui.request('api/user/memberOrderList', 'post', datas, 1000, 1, '', 'memberOrderList');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {
						if (value.data.data) {
							this.recordsList = value.data.data
							this.page++;
						}

					}
				})
			},
			navs() {
				this.isopen = true
			},
			closeOpen() {
				console.log(123)
				this.isopen = false
			},
			goBack() {
				uni.navigateBack()
			},
			openModel() {
				this.open_wallet = true;
			},
			closePop() {
				this.open_wallet = false;
			},

			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},
		},
		onReachBottom() {
			// if (!this.pullUpOn) return;
			this.loadding = true
			setTimeout(() => {
				this.loadding = false
				this.pullUpOn = false
			}, 1000)
			let datas = {
				page: this.page,

			};
			let accoutList = this.tui.request('api/user/memberOrderList', 'post', datas, 1000, 1, '', 'memberOrderList');
			Promise.resolve(accoutList).then((value) => {
				if (value.code == 200) {
					if (value.data.data) {
						this.recordsList = this.recordsList.concat(value.data.data);
						this.page++;
					}

				} else {
					this.tui.toast(value.message);
				}
			})
		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';

	page {
		// background-color: #0c0d13;
		// background: #000;
		color: #fff;
		font-family: "Barlow Semi Condensed", sans-serif;
		// margin: 0;
		// padding: 0;
		// overflow: hidden;
	}

	.e-hidden {
		display: flex;

	}

	.trade_history_list {
		background-color: #0c0d13;
		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		// width: 100%;
		// margin-top: 12rpx;
		overflow-y: auto;
		overflow-x: hidden;
		position: relative;
		z-index: 2
	}

	.tui-tool {
		display: flex;
		flex-direction: row;
	}

	.tui-tool-item {
		width: 25%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-top: 15rpx;
		font-size: 24rpx;
		color: #f4d56f;
	}
</style>